import React, { Component } from 'react'
import "./less/Toggle.less"
import { ChangeSubApi,FieldApi } from '../request/api'
import { Link } from 'react-router-dom'
import Popup from '@/components/Popup'
import Dialog from '@material-ui/core/Dialog';
import Goback from '../components/Goback'

export default class toggle extends Component {
    
    state = {
        subArr: [],
        left: false,
        fieldArr: [],
        actionCode: "",
        subTitle: "",
        open: false,
        subid:0
    }
    
    render() {
        return (
            <div className="toggle_subject">
                <React.Fragment>
                    <Popup left={this.state.left} subid={this.state.subid} fieldArr={this.state.fieldArr} toggleDrawerClose={this.toggleDrawerClose.bind(this)} setActionCode={this.setActionCode.bind(this)}/>
                    <div className="top">
                    <section>
                            <span>
                            <Link to="/home">首页</Link>
                                显示学科-{this.state.subTitle}</span>
                            <span onClick={this.handleClickOpen.bind(this)}>设置默认学科 <i className="iconfont icon-xiangyou"></i></span>
                    </section>
                    <h3>
                        <div onClick={this.toggleDrawerFn.bind(this)}>{this.state.subTitle}</div>
                    </h3>
                </div>
                <div className="bottom">
                    <h3>专业科目</h3>
                    <ul>
                        {
                            this.state.subArr.map(item => (
                                <li key={item.id}>
                                    <Link to="/home">{item.title}</Link>
                                </li>
                            ))
                        }
                    </ul>
                </div>
                <div>
                    <Dialog
                        open={this.state.open}
                        onClose={this.handleClose.bind(this)}
                        aria-labelledby="alert-dialog-title"
                        aria-describedby="alert-dialog-description"
                    >
                        <div className="dialog_content">
                        <section>是否切换{this.state.subTitle}为首页默认显示？</section>
                        <ul>
                            <li onClick={this.handleClose.bind(this)}>取消</li>
                            <li onClick={this.setDefaultSub.bind(this)}>确定</li>
                        </ul>
                        </div>
                    </Dialog>
                </div>
                <Goback />    
                </React.Fragment>
            </div>
        )
    }
    componentDidMount() {
        // let token = localStorage.getItem("x-auth-token");
        // console.log(this.props);
        let actionCode = this.props.match.params.actionCode;
        this.setState({
            actionCode,
        });
        ChangeSubApi({
            actionCode
        }).then(res => {
            if (res.errCode === 0) {
                // console.log(res);
                let { data } = res;
                this.setState({
                    subArr:data
                })
            }
        });
        
        FieldApi().then(res => {
            if (res.errCode === 0) {
                console.log(res);
                let { data } = res
                this.setState({
                    fieldArr:data
                })
                this.state.fieldArr.forEach(element => {
                    if (element.actionCode === localStorage.getItem('actionCode')) {
                        this.setState({
                            subTitle: element.title,
                            subid:element.id
                        });
                    }
                });
            }
        })
    }

    toggleDrawerFn() {
        this.setState({
            left:true
        })
    }
    toggleDrawerClose(open) {
        this.setState({
            left: open
        });
    }
    setActionCode(code,title,id) {
        console.log(code);
        this.setState({
            subTitle: title,
            subid:id
        })
        if (this.state.actionCode !== code) {
            ChangeSubApi({
                actionCode:code
            }).then(res => {
                if (res.errCode === 0) {
                    // console.log(res);
                    let { data } = res;
                    this.setState({
                        subArr: data,
                        actionCode:code
                    })
                }
            });
        }
    }
    setDefaultSub() {
        localStorage.setItem('actionCode', this.state.actionCode)
        this.setState({
            open:false
        })
    }
    handleClickOpen() {
        this.setState({
            open:true
        })
    }
    handleClose() {
        this.setState({
            open:false
        })
    }
}
